<script setup>
import { useRoute } from 'vue-router'
import { useUserStore, useCartStore, useGoodsStore, useOrderStore } from '@/stores'
import showPrompt from '@/utils/showPrompt'
import ReturnButton from '@/components/ReturnButton.vue'
import GoodsPay from './components/GoodsPay.vue'
import { ref } from 'vue'

const route = useRoute()
const userStore = useUserStore()
const cartStore = useCartStore()
const goodsStore = useGoodsStore()
const orderStore = useOrderStore()
const goods_detail = goodsStore.goodsList.find(goods => goods.id === Number(route.query.id))

const addCart = () => {
  if (!userStore.userId) {
    return showPrompt('未登录，请先登录账号！', 'error')
  }
  // 添加到购物车
  cartStore.addToCart({
    ...goods_detail,
    quantity: 1 // 初始数量为1
  })

  showPrompt('已成功加入购物车！', 'success')
}

function wheelEvent(e) {
  e.stopPropagation()
  e.preventDefault()
}

const isPay = ref(false)
const pay = () => {
  if (!userStore.userId) {
    return showPrompt('未登录，请先登录账号！', 'error')
  }
  isPay.value = true
  document.body.addEventListener(
    'wheel',
    wheelEvent,

    { passive: false }
  )
}

const onClosePrompt = () => {
  isPay.value = false
  document.body.removeEventListener('wheel', wheelEvent)
}

const onPaySuccess = (quantity = 1) => {
  // 创建订单对象（单件商品）
  const order = {
    items: [
      {
        ...goods_detail,
        quantity
      }
    ],
    total: goods_detail.price * quantity
  }

  // 添加到订单
  orderStore.addOrder(order)

  showPrompt('支付成功', 'success')
  onClosePrompt()
}
</script>

<template>
  <div class="goods">
    <ReturnButton />
  </div>
  <div class="goods-detail">
    <img :src="goods_detail.imgUrl" />
    <div class="right">
      <h1>{{ goods_detail.name }}</h1>
      <p class="desc">{{ goods_detail.desc }}</p>
      <p class="price">￥{{ goods_detail.price }}</p>
      <div class="btn">
        <button @click="addCart">加入购物车</button>
        <button @click="pay">立即购买</button>
      </div>
    </div>
  </div>
  <GoodsPay
    v-if="isPay"
    :goodsInfo="goods_detail"
    @close-prompt="onClosePrompt"
    @pay-success="onPaySuccess"
  />
</template>

<style scoped lang="scss">
.goods {
  padding: 20px 0 0 60px;
}

.goods-detail {
  display: grid;
  grid-template-columns: 40% 60%;
  justify-content: center;
  gap: 50px;
  width: 100%;
  padding: 10px 80px 40px;

  @media (max-width: 700px) {
    padding: 10px 60px 40px;
    display: flex;
    flex-direction: column;
  }

  img {
    width: 100%;
    object-fit: cover;
    border-radius: 10px;

    @media (max-width: 700px) {
      width: initial;
      max-width: 700px;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .desc {
      color: rgb(72, 72, 72);
    }

    .price {
      color: rgb(169, 152, 143);
      font-size: 24px;
      font-weight: bold;
    }

    .btn {
      display: flex;
      gap: 20px;
      margin-top: auto;

      button {
        width: 100%;
        border: none;
        outline: none;
        height: 50px;
        background-color: var(--theme-color);
        border-radius: 10px;
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
          background-color: var(--btn-hover-color);
        }
      }
    }
  }
}
</style>
